<template>
	<view class="flex-col h-max">
		<view class="background" >
			<u-navbar :custom-back="$navBack" is-back backIconColor="#fff" titleColor="#fff" :border-bottom="false"
				title="服务设置" title-bold :is-fixed="false" :background="{background:'#fff0'}">
			</u-navbar>
			<view class="p20 flex w-max">
				<view class="fs26 color-fff " @click="$u.route('/pages/index/chooseAddress/chooseAddress')">
					{{myAdd.name||'请选择'}}
				</view>
				<image src="/static/img/index/arr.png" class="h14 w14 ml10 mr20" mode=""></image>
				<u-search placeholder="输入名称筛选医院" height="72" bg-color="#fff" class="flex1 " :show-action="false"
					:search-icon-color="$zs" disabled @click="">
				</u-search>
			</view>
		</view>
		<view class="flex1 ov-h">
			<scroll-view scroll-y class="h-max bg-fff" >
				<view class="pl20 pr20" @click="setDome(item.id)" v-for="(item,index) in list" :key="index">
					<view class="flex pt32 pb32 border-b">
						<view class="color-666 flex1">
							<text>{{item.name}}</text>
						</view>
						<view class="w36 h36">
							<image src="/static/img/icon/sel1.png" v-if="hospitals.includes(item.id)" class="wh-max"
								mode=""></image>
							<image src="/static/img/icon/sel0.png" v-else class="wh-max" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="h120"></view>
		<view class="pf bottom0 left0  w-max flex">
			<view class="p24 flex1">
				<u-button type="warning" plain ripple @click="hospitals=[]">清除</u-button>
			</view>
			<view class="p24 flex1">
				<u-button type="warning" ripple @click="submit">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				myAdd: this.$getCache('myAdd') || '',
				hospitals: []
			};
		},
		onLoad(e) {
			// console.log(Array.isArray(NaN));
			if (e.hospitals) {
				this.hospitals = e.hospitals.split(',')?.map(e => e * 1)|| []
			}
		},
		onShow() {
			this.myAdd = this.$getCache('myAdd') || ''
			this.getHospital()
		},
		methods: {
			setDome(id) {
				let arr = this.hospitals
				let index = arr.indexOf(id * 1)
				if (index == '-1') {
					if (arr.length >= 3) return this.$msg('多可选择三家医院')
					arr.push(id)
				} else {
					arr.splice(index, 1)
				}
			},
			submit() {
				uni.$emit('setDome', this.hospitals.toString()) //发送选中项目
				let name = this.list.filter(e => this.hospitals.includes(e.id)).map(e => e.name).toString()
				uni.$emit('setDomeName', name) //发送选中项目名称
				this.$navBack()
			},
			getHospital() { //获取医院项目列表
				let params = {
					city_id: this.myAdd.id
				}
				if (!params.city_id) return this.$msg('请选择地址')
				this.$request('/master/commom/getHospital', params).then(res => {
					let arr = []
					res.data.filter(e => {
						if (this.hospitals.includes(e.id * 1)) {
							arr.push(e.id * 1)
						}
					})
					this.hospitals = arr
					this.list = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #fff;
	}

	.tab-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $zs;
		height: 40%;
		left: 0;
		// top: 39rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
